<template>
	<view class="headerTab" v-if="hederType.data">
		<view v-for="item,i in hederType.data" :key="i">
			<text :class="indexss==i?'textactive':''" @click="changeType(i,item.name)">{{ item.name }}</text>
		</view>
		<view class="img">
			<image @click="tosearsch" src="../../static/search.png" mode=""></image>
		</view>
	</view>
	<view class="twoTab" v-if="hederType.data">
		<view v-for="(eles,elei) in hederType.data[indexss].cates" :key="elei">
			<text :class="elenums==elei?'textactives':''" @click="changeTypetwo(eles.name,elei)">{{ eles.name }}</text>
		</view>
	</view>
	<view class="content" v-if="datas?.data?.length>0" @touchstart.stop="touchStart" @touchend.stop="touchEnd">
		<view class="imgContext" v-for="(item,index) in datas.data" :key="index">
			<view class="img">
				<image @click="getxiangqing(item.id)" :src="item.img" @error="imgerror(index)"></image>
			</view>
			<view class="text1">
				{{item.name}}
			</view>
			<view class="text2">
				{{item.content}}
			</view>
		</view>
		<view v-show="isJiazai">
			<view class="loading">{{msg}}</view>
		</view>
	</view>
	<view @click.stop="callTop" class="callTop">
		<view class="sanjiaox"></view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		seletefenleitag,
		seletetypedata,

	} from '@/api/api.js'
	import {
		selecttheme
	} from '@/api/users.js'
	import {
		useStore
	} from 'vuex'
	let store = useStore()
	let isShow = ref(true)
	let indexss = ref(1)
	let elenums = ref(0)
	let isJiazai = ref(false)
	let msg = ref('正在加载中')
	let hederType = reactive({
		data: null
	})
	let datas = reactive({
		data: []
	})
	let page = ref(0)
	let pageSize = ref(9)
	//初始化头部导航栏
	seletefenleitag().then(res => {
		hederType.data = JSON.parse(res.data.data[0].data)
	}).catch(err => {
		uni.showToast({
			title: '网络太差了',
			icon: "error"
		});
	})
	let numsss = null
	let changeType = (index, id) => {
		if (numsss == index) {
			return
		}
		numsss = index
		page.value = 0
		pageSize.value = 9
		isShow.value = false
		indexss.value = index
		elenums.value = 0
		datas.data = []
		initDatas(hederType.data[index].cates[0].name, page.value, pageSize.value)
	}
	const imgerror = (i) => {

		datas.data[i].img = 'http://175.178.117.99:8888/down/9f1i0RJD19kt.png'
	}
	let sssnum = 0
	let changeTypetwo = (name, index) => {
		if (sssnum == index) {
			return
		}
		sssnum++
		datas.data = []
		page.value = 0
		pageSize.value = 9
		elenums.value = index
		initDatas(name, page.value, pageSize.value)
	}

	let initDatas = (name, page, pagesize) => {
		seletetypedata(name, page, pagesize).then((res) => {
			if (res.data.data == undefined) {
				msg.value = '已经到底了,没了'
			}
			isJiazai.value = false
			res.data.data.forEach(item => {
				datas.data.push(item)
			})

		})
	}
	initDatas('现言', page.value, pageSize.value)

	const getxiangqing = (id) => {

		store.commit('updatexiangqing', id)
		uni.navigateTo({
			url: '/pages/xiangqing/xiangqing'
		});
	}
	const tosearsch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	//懒加载
	let startY = 0
	let height = 0
	const touchStart = (e) => {
		if (e.touches.length == 1) {
			//设置触摸起始点水平方向位置
			let ss = uni.createSelectorQuery().select('.content')
			ss.boundingClientRect(data => {
				height = e.touches[0].pageY
				let ss = e.touches[0].pageY
				startY = data.height - ss
			}).exec();
		}
	}
	const touchEnd = (e) => {
		let jieshuY = e.changedTouches[0].pageY
		if ((height - jieshuY) > 60 && startY < 150) {
			isJiazai.value = true
			page.value++
			initDatas(hederType.data[indexss.value].cates[elenums.value].name, page.value, pageSize.value)

		}
	}


	let usersid = store?.state?.users?.id
	if (usersid) {
		selecttheme(usersid).then((res) => {
			let theme = res.data.data[0]
			let ss = {}
			ss.textcolor = theme.textcolor,
				ss.bgcolor = theme.bgcolor,
				ss.size = theme.size
			store.commit('updatetheme', ss)
		})
	}


	const callTop = () => {
		uni.pageScrollTo({
			scrollTop: 0
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-bottom: 40rpx;
		>view {
			margin-top: 30rpx;
			
			.img {
				box-shadow: rgba(0, 0, 0, .2) 0 1px 5px 0px;
			}

			image {
				width: 200rpx;
				height: 300rpx;
			}

			.text1 {
				width: 200rpx;
				font-size: 28rpx;
				color: $color3;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1; //行数需设置
				line-clamp: 3;
				-webkit-box-orient: vertical;
				margin-top: 10rpx;
			}
			.text2 {
				width: 200rpx;
				font-size: 24rpx;
				color: $color3;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1; //行数需设置
				line-clamp: 3;
				-webkit-box-orient: vertical;
				margin-top: 10rpx;
			}
		}
		>view:nth-child(3n-2){
			margin-right: 50rpx;
		}
		>view:nth-child(3n-1){
			margin-right: 50rpx;
		}

	}

	.headerTab {
		width: 700rpx;
		margin: 0 auto;
		padding: 20rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		border-bottom: 1rpx solid #f8f8f8;
		padding-bottom: 20rpx;

		>view {
			width: 75rpx;
			height: 40rpx;
			line-height: 40rpx;
			padding: 10rpx 20rpx;
			color: $color1;
			font-size: 28rpx;

		}

		.img {
			image {
				width: 60rpx;
				height: 60rpx;
				position: relative;
				left: 130rpx;
				top: -10rpx;
			}

		}
	}

	.twoTab {
		width: 700rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		>view {
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			padding: 10rpx 20rpx;
			color: $color1;
			font-size: 28rpx;
			margin-top: 20rpx;

		}
	}

	.bgcolor {
		background-color: $bgcolor;
	}

	.textactive {
		color: $color2;
		font-size: 35rpx;
		font-weight: 600;



	}

	.textactive::after {
		content: '';
		width: 25rpx;
		height: 5rpx;
		display: block;
		background-color: red;
		margin: 0 auto;
		margin-top: 5rpx;
	}

	.textactives {
		color: $color2;
		font-size: 35rpx;
		font-weight: 600;
	}

	.textactives::after {
		content: '';
		width: 25rpx;
		height: 5rpx;
		display: block;
		background-color: red;
		margin: 0 auto;
		margin-top: 5rpx;
	}

	.callTop {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #f50f50;
		position: fixed;
		bottom: 100rpx;
		right: 100rpx;

		.sanjiaox {
			width: 0rpx;
			height: 0rpx;
			border-bottom: 30rpx solid #ffffff;
			border-right: 20rpx solid #f50f50;
			border-left: 20rpx solid #f50f50;
			margin: 0 auto;
			margin-top: 20rpx;
		}
	}
</style>